<template>
  <div :class="[prefixCls, { fullscreen }]">
    <Upload
      name="file"
      multiple
      @change="handleChange"
      :action="uploadUrl"
      :showUploadList="false"
      accept=".jpg,.jpeg,.gif,.png,.webp"
    >
      <a-button type="primary" v-bind="{ ...getButtonProps }">
        {{ t("component.upload.imgUpload") }}
      </a-button>
    </Upload>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";

import { Upload } from "ant-design-vue";
import { useDesign } from "@/hooks/web/useDesign";
import { useGlobSetting } from "@/hooks/setting";
import { useI18n } from "@/hooks/web/useI18n";

defineOptions({ name: "TinymceImageUpload" });

const props = defineProps({
  fullscreen: {
    type: Boolean,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["uploading", "done", "error"]);

let uploading = false;

const { uploadUrl } = useGlobSetting();
const { t } = useI18n();
const { prefixCls } = useDesign("tinymce-img-upload");

const getButtonProps = computed(() => {
  const { disabled } = props;
  return {
    disabled,
  };
});

function handleChange(info: Record<string, any>) {
  const file = info.file;
  const status = file?.status;
  const url = file?.response?.url;
  const name = file?.name;

  if (status === "uploading") {
    if (!uploading) {
      emit("uploading", name);
      uploading = true;
    }
  } else if (status === "done") {
    emit("done", name, url);
    uploading = false;
  } else if (status === "error") {
    emit("error");
    uploading = false;
  }
}
</script>
<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-tinymce-img-upload";

.@{prefix-cls} {
  position: absolute;
  z-index: 20;
  top: 4px;
  right: 10px;

  &.fullscreen {
    position: fixed;
    z-index: 10000;
  }
}
</style>
